<!--
  ~ The MIT License (MIT)
  ~
  ~ Copyright (c) 2019 ‭‭‭‭‭‭‭‭‭‭‭‭[smallbun] www.smallbun.org
  ~
  ~ Permission is hereby granted, free of charge, to any person obtaining a copy of
  ~ this software and associated documentation files (the "Software"), to deal in
  ~ the Software without restriction, including without limitation the rights to
  ~ use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
  ~ the Software, and to permit persons to whom the Software is furnished to do so,
  ~ subject to the following conditions:
  ~
  ~ The above copyright notice and this permission notice shall be included in all
  ~ copies or substantial portions of the Software.
  ~
  ~ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  ~ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
  ~ FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
  ~ COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
  ~ IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  ~ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  -->

<!DOCTYPE html>
<!--suppress ALL-->
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
    <head>
        <div th:include="fragments/include  :: header('添加')"></div>
        <div th:include="fragments/include :: ztree-css"></div>
        <div th:include="fragments/include :: bootstrap-colorpicker-css"></div>
    </head>
    <body>
        <div class="i-ibox">
            <div class="ibox-content">
                <form class="form-horizontal" id="form" th:action="@{/menu/saveOrUpdate}" th:object="${menu}"
                      method="post"
                      novalidate="novalidate">
                    <input id="id" name="id" type="hidden" th:field="*{id}">
                    <h4 class="page-header h4">基本信息</h4>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label class="col-sm-4 control-label">上级菜单：</label>
                                <div class="col-sm-8">
                                    <div class="input-group" style="width: 100%">
                                        <input readonly="readonly" type="text" id="pop-up-menu-tree"
                                               th:value="*{parentId}" placeholder="请选择上级菜单"
                                               class="form-control"/>
                                        <span class="input-group-addon">
                                            <i class="fa fa-search"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label class="col-sm-4 control-label" title="菜单名称">
                                    <font color="red">*</font>菜单名称：
                                </label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text"
                                           maxlength="50" autocomplete="off" placeholder="请输入菜单名称" id="menuName"
                                           name="menuName" th:field="*{menuName}" required>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label class="col-sm-4 control-label"><span style="color: red">*</span>菜单类型：
                                </label>
                                <div class="col-sm-8">
                                    <div class="input-group">
                                        <label class="label-radio" required
                                               th:each="dict : ${@smallbun.dict('MENU_TYPE')}">
                                            <input type="radio" class="minimal" name="menuType"
                                                   th:value="${dict.dictValue}" required th:field="*{menuType}">
                                            <label th:text="${dict.dictLabel}"></label>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label class="col-sm-4 control-label"><span style="color: red">*</span>菜单状态：
                                </label>
                                <div class="col-sm-8">
                                    <div class="input-group">
                                        <label class="label-radio" required
                                               th:each="dict : ${@smallbun.dict('MENU_STATUS')}">
                                            <input type="radio" class="minimal" name="menuStatus"
                                                   th:value="${dict.dictValue}" required th:field="*{menuStatus}">
                                            <label th:text="${dict.dictLabel}"></label>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label class="col-sm-4 control-label">菜单链接：
                                </label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text"
                                           maxlength="50" autocomplete="off" placeholder="请输入菜单链接" id="url"
                                           name="url" th:field="*{url}">
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label class="col-sm-4 control-label">菜单目标：
                                </label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text"
                                           maxlength="50" autocomplete="off" placeholder="请输入菜单目标" id="target"
                                           name="target" th:field="*{target}">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label class="col-sm-4 control-label">菜单图标：
                                </label>
                                <div class="col-sm-8">
                                    <div class="input-group">
                                        <!--显示图标-->
                                        <span class="input-group-addon" style="width: 38px;">
                                            <i id="icon-show" th:class="*{icon}"></i>
                                        </span>
                                        <input readonly="readonly" autocomplete="off" id="pop-up-icon-tree"
                                               th:field="*{icon}"
                                               placeholder="请选择菜单图标" title="请选择菜单图标" class="form-control" name="icon"
                                               onclick="$.modal.open('选择图标', contextPath + 'icon','','',iconConfirm)"/>
                                        <span class="input-group-addon"
                                              onclick="$.modal.open('选择图标', contextPath + 'icon','','',iconConfirm)">
                                            <i class="fa fa-search"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label class="col-sm-4 control-label">字体颜色：</label>
                                <div class="col-sm-8">
                                    <div class="input-group" id="color-picker" style="width: 100%">
                                        <input class="form-control" id="fontColor" name="fontColor" readonly="readonly"
                                               placeholder="请选择字体颜色" th:field="*{fontColor}">
                                        <div class="input-group-addon">
                                            <i></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label class="col-sm-4 control-label">权限标识：
                                    <i class="ion-help-circled"></i>
                                </label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text"
                                           maxlength="50" autocomplete="off" id="permission" name="permission"
                                           placeholder="请输入权限标识" th:field="*{permission}">
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label class="col-sm-4 control-label"><span style="color: red">*</span>排序：
                                </label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="number"
                                           maxlength="50" autocomplete="off" id="sort" name="sort"
                                           placeholder="请输入顺序" th:field="*{sort}" required>
                                </div>
                            </div>
                        </div>
                    </div>
                    <h4 class="page-header h4">其他信息</h4>
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">备注：</label>
                                <div class="col-sm-10">
                                    <textarea id="remarks" name="remarks" th:field="*{remarks}" maxlength="200"
                                              class="form-control "
                                              rows="3"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="box-footer">
                <div class="row">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-sm ibtn-primary" onclick="doSubmit()" id="btn-submit">
                            <i class="fa fa-check"></i>
                            保 存
                        </button>&nbsp;
                        <button type="button" class="btn btn-sm btn-default" id="btn-cancel"
                                onclick="parent.closeCurrentTabPage(window)">
                            <i class="fa fa-reply-all"></i>
                            关 闭
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <div th:include="fragments/include :: include-js"></div>
    <div th:include="fragments/include :: bootstrap-colorpicker-js"></div>
    <div th:include="fragments/include :: ztree-js"></div>
    <div th:include="fragments/include :: jquery-validate-js"/>
    <script th:src="@{/static/modules/manage/js/menu/menu_form.js}"></script>
</html>